<template>
    <div>
        <Header></Header>
        <div class="detail">
            <div>
                <h2>{{blog.title}}</h2>
                <div style="margin-left: 750px">
                    <router-link :to="{name: 'BlogEdit', params:{blogId: blog.id }}">
                        <el-button type="primary" round icon="el-icon-edit" v-show="flag">
                            编辑
                        </el-button>
                    </router-link>
                    &nbsp
                    &nbsp
                    &nbsp
                    &nbsp

                    <el-button type="danger" round icon="el-icon-delete" v-show="flag" @click="remove()">
                        删除
                    </el-button>
                </div>
            </div>


            <el-divider></el-divider>
            <div class="markdown-body" v-html="blog.content"></div>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header";
    import 'github-markdown-css'

    export default {
        name: "BlogDetail",
        components: {Header},
        data() {
            return {
                blog: {
                    id: '',
                    content: "正文1",
                    title: "标题1",
                    description: "摘要1"
                },
                //判断是不是本人操作
                flag: false
            }
        },
        methods: {
            //删除博客
            remove() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.$axios.post('/blog/remove', this.blog).then(rest => {
                        console.log(rest.data)
                    })
                    this.$router.push('/')

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        created() {
            const blogId = this.$route.params.blogId
            if (blogId) {
                const that = this
                this.$axios.get('/blog/list/' + blogId).then(rest => {
                    that.blog.title = rest.data.data.title
                    that.blog.id = blogId
                    that.blog.description = rest.data.data.description

                    //转成Markdown显示
                    const MarkdownIt = require("markdown-it")
                    const md = new MarkdownIt()
                    const result = md.render(rest.data.data.description + rest.data.data.content)

                    that.blog.content = result

                    //按钮显示 只有当是本人登录时才显示
                    that.flag = (rest.data.data.userId == that.$store.getters.getUser.id)
                })
            }
        }
    }
</script>

<style scoped>
    .detail {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        width: 100%;
        min-height: 700px;
        padding: 5px;
    }

    h2 {
        text-align: center;
    }
</style>